<template>
  <view class="payment-process-container">
    <text class="payment-title">微信支付</text>
    <text class="amount">应付金额：{{ totalCost }} 元</text>
    <input type="password" v-model="paymentPassword" placeholder="请输入支付密码" />
    <button class="pay-button" @click="processPayment">立即支付</button>
    <text v-if="paymentError" class="error-message">{{ paymentError }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalCost: 0,
      paymentPassword: '',
      paymentError: ''
    };
  },
  onLoad(options) {
    // 从URL参数中获取应付金额
    if (options.totalCost) {
      this.totalCost = options.totalCost;
    }
  },
  methods: {
    processPayment() {
      if (this.paymentPassword === '197988') {
        // 模拟支付成功
        wx.showToast({
          title: '支付成功',
          icon: 'success',
          duration: 2000
        });
        // 跳转到支付成功页面
        wx.redirectTo({
          url: '/pages/paymentSuccess/paymentSuccess'
        });
      } else {
        // 支付失败
        this.paymentError = '支付密码错误，请重试';
      }
    }
  }
};
</script>

<style>
.payment-process-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 修改为flex-start以将内容放到顶部 */
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.payment-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  margin-top: 20px; /* 添加顶部间距 */
}

.amount {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

input {
  width: 80%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.pay-button {
  background-color: #28a745; /* 绿色背景 */
  color: white;
  padding: 5px 30px; /* 减少内边距 */
  border-radius: 10px; /* 圆角 */
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
  border: none; /* 去掉边框 */
  width: 90%; /* 设置按钮宽度 */
  max-width: 400px; /* 最大宽度 */
}

.pay-button:hover {
  background-color: #218838; /* 悬停时的颜色 */
}

.error-message {
  color: red;
  margin-top: 10px;
}
</style>